<template>
	<view class="setting_container">
		<u--form
			labelPosition="left"
			:model="formdata"
			ref="uForm"
		>
			<u-form-item
				label="头像"
				borderBottom
			>
				<view class="head_img">
					<image class="_img" :src="formdata.avatar" mode="aspectFill"></image>
				</view>
			</u-form-item>
			
			<u-form-item
				label="姓名"
				borderBottom
			>
				<u--input
					v-model="formdata.name"
					placeholder="请输入您的姓名"
					border="none"
					inputAlign="right"
				/>
			</u-form-item>
			
			<u-form-item
				label="生日"
				borderBottom
				@click="datePickerVisible=true"
			>
				<u--input
					v-model="formdata.birthday"
					placeholder="请选择您的出生年月日"
					border="none"
					readonly
					inputAlign="right"
				/>
				<u-icon
					slot="right"
					name="arrow-right"
				/>
			</u-form-item>
			
			<u-form-item
				label="简介"
				borderBottom
			>
				<u--textarea
					v-model="formdata.des"
					placeholder="请输入您的简介"
				/>
			</u-form-item>
			
			<u-form-item
				label="证书"
				borderBottom
			>
				<u--textarea
					v-model="formdata.cert"
					placeholder="请列出您所拥有的所有证书"
				/>
			</u-form-item>
			
			<u-form-item
				label="成就"
			>
				<u--textarea
					v-model="formdata.achieve"
					placeholder="请写出您的成就"
				/>
			</u-form-item>
		</u--form>
		
		<view class="submit_content">
			<u-button type="primary">提 交</u-button>
		</view>
		
		<!-- 出生年月日选择 -->
		 <u-datetime-picker
			:show="datePickerVisible"
			v-model="birthdayTime"
			mode="date"
			:minDate="0"
			:closeOnClickOverlay="true"
			@close="datePickerVisible=false"
			@confirm="birthdayChange"
			:maxDate="new Date().getTime()"
		/>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				birthdayTime: new Date().getTime(),
				formdata: {
					avatar: 'https://img2.baidu.com/it/u=4134404395,864195599&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=666',
					name: '',
					birthday: '',
					des: '',
					cert: '',
					achieve: ''
				},
				datePickerVisible: false
			}
		},
		
		methods: {
			birthdayChange({value}) {
				this.formdata.birthday = this.fmtDate(value);
				this.datePickerVisible = false;
			},
			
			// 时间戳转年月日
			fmtDate(timestamp) {
				let time = new Date(timestamp)
				let year = time.getFullYear()
				let month = time.getMonth() + 1
				let date = time.getDate()
				return year + '-' + month + '-' + date
			}
		}
	}
</script>

<style lang="scss" scoped>
	.setting_container{
		background-color: #fff;
		padding: 0 30rpx;
	}
	.head_img{
		display: flex;
		justify-content: flex-end;
		._img{
			width: 100rpx;
			height: 100rpx;
			border-radius: 50%;
		}
	}
	
	.submit_content{
		padding: 30rpx 0;
	}
</style>